<template>
  <div class="play-control" :class="{show:!toggle}">
    <div @click="toggle=!toggle" class="item-up" :class="{turn:toggle}">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiantou-xia-cuxiantiao"></use>
      </svg>
    </div>
    <div class="kongjian" >
      <!--上一首-->
      <div class="item" @click="prev">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ziyuanldpi"></use>
        </svg>
      </div>
      <!--播放-->
      <div class="item" @click="togglePlay">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="buttonIcon"></use>
        </svg>

      </div>
      <!--下一首-->
      <div class="item" @click="next">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ziyuanldpi1"></use>
        </svg>
      </div>
      <!--歌曲图片-->
      <div class="item-img">
        <img :src=songInfo.picture alt="">
      </div>
      <!--播放进度-->
      <div class="playing-speed">
        <!--播放开始时间-->
        <div class="current-time">{{ nowTime }}</div>
        <div class="progress-box">
          <div class="item-song-title">
            <div>{{this.songInfo.name}}</div>
            <div>{{this.songInfo.singer.name}}</div>
          </div>
          <div>
            <el-slider v-model="value3" :show-tooltip="true" @change="Myslider" ></el-slider>
          </div>
        </div>
        <!--播放结束时间-->
        <div class="left-time">{{ songTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  // import mixin from '../../mixins'
  export default {
    name: 'play-control',
    props: {
      songInfo: {
       type: Object
      }
    },
    data () {
      return {
        value3: 0,
        tag: false,
        nowTime: '00:00',
        songTime: '00:00',
        curLength: 0, // 进度条的位置
        progressLength: 0, // 进度条长度
        mouseStartX: 0, // 拖拽开始位置
        toggle: true,
        playIcon:''
      }
    },
    computed: {
      ...mapGetters([
        'isPlay', // 播放状态
        'buttonIcon', // 播放状态的图标
        'curTime', // 当前音乐的播放位置
        'duration', // 音乐时长
      ])
    },
    watch: {
      // 切换播放状态的图标
      isPlay: function (val) {
        if (val) {
          console.log(val)
          console.log("监听了暂停啊")
          this.$store.commit('setbuttonIcon', '#icon-zanting')
          window.sessionStorage.setItem('buttonIcon', JSON.stringify('#icon-zanting'))
        } else {
          console.log("监听了播放啊")
          this.$store.commit('setbuttonIcon', '#icon-bofang')
          window.sessionStorage.setItem('buttonIcon', JSON.stringify('#icon-bofang'))
        }
        this.playIcon = this.buttonIcon
      },
      // 播放时间的开始和结束
      curTime: function () {
        this.nowTime = this.formatSeconds(this.curTime)
        this.songTime = this.formatSeconds(this.duration)
        // 移动进度条
        this.curLength = (this.curTime / this.duration) * 100

        this.value3 = this.curLength
        // 处理歌词位置及颜色
      },
      // 自动播放下一首
      autoNext: function () {
        this.next()
      }
    },
    methods: {
      Myslider () {
        this.changeTime(this.value3)
      },
      // 控制音乐播放/暂停
      togglePlay () {
        if (this.isPlay) {
          this.$store.commit('setIsPlay', false)
          window.sessionStorage.setItem('isPlay', JSON.stringify(false))
        } else {
          this.$store.commit('setUrl', this.songInfo.songUrl)
          this.$store.commit('setIsPlay', true)
          window.sessionStorage.setItem('isPlay', JSON.stringify(true))
        }
      },
      //  解析播放时间
      formatSeconds (value) {
        let theTime = parseInt(value)
        let theTime1 = 0
        let theTime2 = 0
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60) // 分
          theTime = parseInt(theTime % 60) // 秒
          // 是否超过一个小时
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60) // 小时
            theTime1 = 60 // 分
          }
        }
        // 多少秒
        if (parseInt(theTime) < 10) {
          var result = '0:0' + parseInt(theTime)
        } else {
          result = '0:' + parseInt(theTime)
        }
        // 多少分钟时
        if (theTime1 > 0) {
          if (parseInt(theTime) < 10) {
            result = '0' + parseInt(theTime)
          } else {
            result = parseInt(theTime)
          }
          result = parseInt(theTime1) + ':' + result
        }
        // 多少小时时
        if (theTime2 > 0) {
          if (parseInt(theTime) < 10) {
            result = '0' + parseInt(theTime)
          } else {
            result = parseInt(theTime)
          }
          result = parseInt(theTime2) + ':' + parseInt(theTime1) + ':' + result
        }
        return result
      },
      //  拖拽开始
      mousedown (e) {
        // console.log(e)
        // console.log(this.$refs.idot.offsetLeft)
        this.mouseStartX = e.clientX
        this.tag = true
      },
      mouseup () {
        this.tag = false
      },
      //  拖拽ing
      mousemove (e) {
        if (!this.duration) {
          return false
        }
        if (this.tag) {
          let movementX = e.clientX - this.mouseStartX
          let curLength = this.$refs.curProgress.getBoundingClientRect().width
          //  计算出百分比
          this.progressLength = this.$refs.progress.getBoundingClientRect().width
          let newPercent = ((curLength + movementX) / this.progressLength) * 100
          if (newPercent > 100) {
            newPercent = 100
          }
          this.curLength = newPercent
          this.mouseStartX = e.clientX
          //  根据百分比推出对应的播放时间
          this.changeTime(newPercent)
        }
      },
      // 更改歌曲进度
      changeTime (percent) {
        let newCurTime = this.duration * (percent * 0.01)
        this.$store.commit('setChangeTime', newCurTime)
        window.sessionStorage.setItem('changeTime', JSON.stringify(newCurTime))
      },
      updatemove (e) {
        if (!this.tag) {
          let curLength = this.$refs.bg.offsetLeft
          this.progressLength = this.$refs.progress.getBoundingClientRect().width
          let newPercent = ((e.clientX - curLength) / this.progressLength) * 100
          if (newPercent < 0) {
            newPercent = 0
          } else if (newPercent > 100) {
            newPercent = 100
          }
          this.curLength = newPercent
          this.changeTime(newPercent)
        }
      },
      // 上一首
      prev () {
        // 如果当前歌曲所在列表的位置==-1  并且   歌曲列表的长度大于1
        if (this.listIndex !== -1 && this.listOfSongs.length > 1) {
          // 如果当前歌曲所在列表的位置大于0
          if (this.listIndex > 0) {
            this.$store.commit('setListIndex', this.listIndex - 1)
            window.sessionStorage.setItem('listIndex', JSON.stringify(this.listIndex - 1))
            this.toPlay(this.listOfSongs[this.listIndex].url)
          } else {
            // 如果当前歌曲所在列表的位置==0  this.listOfSongs.length==1
            this.$store.commit('setListIndex', this.listOfSongs.length - 1)
            window.sessionStorage.setItem('listIndex', JSON.stringify(this.listOfSongs.length - 1))
            this.toPlay(this.listOfSongs[this.listIndex].url)
          }
        }
      },
      // 下一首
      next () {
        if (this.listIndex !== -1 && this.listOfSongs.length > 1) {
          // 如果当前歌曲所在列表的位置小于歌曲列表的长度-1
          if (this.listIndex < this.listOfSongs.length - 1) {
            this.$store.commit('setListIndex', this.listIndex + 1)
            window.sessionStorage.setItem('listIndex', JSON.stringify(this.listIndex - 1))
            this.toPlay(this.listOfSongs[this.listIndex].url)
          } else {
            // 如果当前歌曲所在列表的位置等于歌曲列表的长度-1
            //设索引为0
            this.$store.commit('setListIndex', 0)
            window.sessionStorage.setItem('listIndex', JSON.stringify(0))
            this.toPlay(this.listOfSongs[0].url)
          }
        }
      },
      // 选中播放
      toPlay (url) {
        if (url) {
          this.$store.commit('setUrl', url)
        }
      }
    }
  }
</script>

<style scoped>
  .play-control{
    position: fixed;
    bottom: 0;
    width: 80%;
    transition: all .5s;
    box-shadow: 0 0 10px black;
  }

  .item-up {
    position: absolute;
    bottom: 90px;
    left: 20px;
    cursor: pointer;
  }

  .kongjian {
    bottom: 0;
    height: 75px;
    width: 100%;
    background-color: #fefefe;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-width: 1000px;
  }

  .show {
    bottom: -80px;
  }

  .turn{
    transform: rotate(180deg);
  }

  .item{
    width: 80px;
    height: 50px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    font-size: 1.2em;
  }

  .item-img {
    width: 50px;
    height: 50px;
  }

  .item-img img {
    width: 100%;
  }

  .item-song-title {
    display: flex;
    justify-content: space-between;
    height: 20px;
    line-height: 10px;
  }

  .playing-speed {
    height: 50px;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .playing-speed .current-time,
  .playing-speed .left-time {
    width: 70px;
    text-align: center;
    font-size: 13px;
    color:black;
    font-weight: 500;
    top: -10px;
  }

  .playing-speed .progress-box {
    flex: 1;
  }

  .playing-speed .progress-box .progress {
    width: 100%;
    background: #a9dbf9;
    height: 6px;
  }

  .bg {
    height: 100%;
  }

  .cur-progress {
    height: 100%;
    background: #30a4fc;
  }

  .playing-speed>.progress-box .idot {
    width: 16px;
    height: 16px;
    position: relative;
    border-radius: 50%;
    background-color: black;
    top: -11px;
    vertical-align: middle;
  }

  .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    color: black;
    font-size: 1.5em;
  }

  .dropup {
    position: relative;
  }

  .dropup:hover .menus {
    display: block;
  }

  .menus {
    display: none;
    background-color: #fff;
    position: absolute;
    max-height: 250px;
    min-height: 50px;
    width: 250px;
    right: -80px;
    bottom:54px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    overflow: scroll;
    white-space: nowrap;
  }

  .menus li {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
  }

  .menus li:hover{
    background-color: #95d2f6;
    color: white;
  }

</style>
